<template>
    <div>
        <div class="side">
            <div class="pre" @click="handleNext('top')" :class="preDis?'dis':''">
                <img src="../assets/images/pre1.png" alt="" v-if="preDis">
                <img src="../assets/images/pre.png" alt="" v-else>
            </div>
            <div class="inner">
                <div class="list" :style="{ marginTop: tp + 'px' }">
                    <div v-for="item in sideList" :key="item.value" @mouseover="handleInfo($event,item.value)"
                        class="item">
                        <img :src="item.icon" alt="">
                        <p>{{ item.label }}</p>
                        <Transition>
                            <div class="modal" :style="{top:tanY+'px'}">
                                <ul>
                                    <li v-for="item in list" :key="item.value">
                                        <img src="../assets/images/icon.png" alt="">
                                        <span>{{ item.label }}</span>
                                    </li>
                                </ul>
                            </div>
                        </Transition>
                    </div>
                </div>
            </div>
            
            <div class="next" @click="handleNext('bot')" :class="nextDis?'dis':''">
                <img src="../assets/images/next1.png" alt="" v-if="nextDis">
                <img src="../assets/images/next.png" alt="" v-else>
            </div>
           
            
        </div>
    </div>
</template>
<script setup>
import { ref ,computed} from 'vue'
import img1 from '../assets/images/img1.png'
import img2 from '../assets/images/img2.png'
import img3 from '../assets/images/img3.png'
import img4 from '../assets/images/img4.png'
import img5 from '../assets/images/img5.png'
const sideList = ref([])
sideList.value = [{
    label: '天气实况',
    value: 1,
    icon: img1
}, {
    label: '防洪防汛',
    value: 2,
    icon: img2
}, {
    label: '交通在线',
    value: 3,
    icon: img3
}, {
    label: '森林防火',
    value: 4,
    icon: img4
}, {
    label: '基础信息',
    value: 5,
    icon: img5
}, {
    label: 'aajj',
    value: 6,
    icon: img1
}]
const tp = ref(0)
const tanY = ref(0)
const activeIndex = ref(-1)
const list = ref([])
const nextDis=computed(()=>{
    return tp.value==0;
})
const preDis=computed(()=>{
    return sideList.value.length - 5 <= -tp.value / 120;
})
list.value = [{
    label: '水库水位（所有含水位站aaaaaa',
    value: 1
}, {
    label: '水库水位（所有含水位站…',
    value: 2
}, {
    label: '水库水位（所有含水位站…',
    value: 3
}, {
    label: '水库水位（所有含水位站…',
    value: 4
}, {
    label: '水库水位（所有含水位站…',
    value: 5
}, {
    label: '水库水位（所有含水位站…',
    value: 6
}, {
    label: '水库水位（所有含水位站…',
    value: 7
}, {
    label: '水库水位（所有含水位站…',
    value: 8
}, {
    label: '水库水位（所有含水位站…',
    value: 9
}, {
    label: '水库水位（所有含水位站…',
    value: 10
}]
const handleNext = (pos) => {
    if (pos == 'top') {
        if (!preDis.value) {
            tp.value -= 120
        }
       
    } else if (pos == 'bot') {
        if (!nextDis.value) {
            tp.value += 120
        }
    }
}
const handleInfo=(e,val)=>{
    tanY.value=(val-1)*120+tp.value+320
}
</script>
<style lang="scss" scoped>
.list {
    transition: margin 500ms ease-out;
}

.side {
    position: absolute;
    left: 7px;
    top: 260px;
    z-index: 99999;
    .inner {
        height: 600px;       
        overflow-y: hidden;
    }
    .pre,
    .next {
        margin: 0 auto;
        text-align: center;
        cursor: pointer;
    }
    .dis{
        cursor: not-allowed;
    }
    .item {
        width: 150px;
        height: 120px;
        text-align: center;
        box-sizing: border-box;
        padding-top: 28px;
        background: url(../assets/images/bg6.png) no-repeat center;
        background-size: 100% 100%;
        cursor: pointer;
        position: relative;
        p {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 18px;
        }

        &.active ,&:hover{
            background: url(../assets/images/bg5.png) no-repeat center;
            background-size: 100% 100%;

            p {
                color: rgba(0, 255, 255, 0.8);
                font-weight: bold;
            }
            .modal{
                display: block;
            }
        }
    }

    .modal {
        display:none;
        position: fixed;
        left: 150px;
        top: 20px;
        width: 501px;
        max-height: 301px;
        background: rgba(0, 30, 76, 0.36);
        border-radius: 2px;
        border: 1px solid #2774B3;
        overflow-y: auto;
        box-sizing: border-box;
        padding-top: 18px;
        z-index: 999999;
        ul {
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0 0 0 15px;
            flex-wrap: wrap;
            li {
                width: 230px;
                height: 35px;
                background-image: linear-gradient(90deg, rgba(12, 94, 175, 0.5) 0%,rgba(13, 63, 119, 0.5) 100%);
                border-radius: 2px;
                border: 1px solid #00AAF7;
                box-sizing: border-box;
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                padding-left: 7px;
                &:nth-child(odd){
                    margin-right: 10px;
                }
                &:hover{
                    background: linear-gradient(90deg, #0C5EAF 0%, #0D3F77 100%);
                    border-radius: 2px;
                    border: 2px solid #00FFFF;
                }
                img {
                    flex-shrink: 0;
                }

                span {
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                    margin-left: 5px;
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>